<template>
  <div class="person_homeView">
    <el-card class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="100px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input v-model="form.workNo" clearable :placeholder="$t('add.add116')" style="width: 180px" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.workOrderType" style="width: 150px" clearable :placeholder="$t('add.add117')">
                <el-option v-for="item in typeList" :key="item.id" :label="item.paramValue" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.statusName" style="width: 150px" clearable :placeholder="$t('add.add118')">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="dates" :end-placeholder="$t('versionLogManagement.version02')"
                :start-placeholder="$t('versionLogManagement.version01')" style="width: 300px" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" type="daterange" :placeholder="$t('add.add122')" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPatientList">{{
                $t('add.add123')
              }}</el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">{{
                $t('add.add124')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="top_nav_right">
                    <el-button @click="add" type="primary" :size="optionButtonSize">{{ $t('add.add54') }}</el-button>
                    <el-button plain :size="optionButtonSize">删除</el-button>
                    <el-button plain :size="optionButtonSize">导出</el-button>
                </div> -->
      </div>
    </el-card>
    <el-card :shadow="shadowShow" class="partner_inner">
      <el-table :data="tableData" style="width: 100%" size="mini" :header-cell-style="headercellstyle">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column align="center" prop="workNo" :label="$t('add.add126')" />
        <el-table-column align="center" prop="workOrderType" :label="$t('add.add117')">
          <!-- <template slot-scope="scope" style="display:flex;justify-content: flex-start;">
                        <span v-if="scope.row.workOrderType == 29">{{ $t('add.add128') }}</span>
                        <span v-if="scope.row.workOrderType == 26">建议或需求</span>
                        <span v-if="scope.row.workOrderType == 24">问题</span>
                        <span v-if="scope.row.workOrderType == 22">全部</span>
                    </template> -->
        </el-table-column>
        <el-table-column align="center" prop="content" :label="$t('add.add127')" />
        <el-table-column align="center" prop="updateDate" :label="$t('add.add129')">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            {{ scope.row.updateDate }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusName" :label="$t('add.add130')">
          <!-- <template slot-scope="scope" style="display:flex;justify-content: flex-start;">
                        {{ scope.row.status }}
                        <span v-if="scope.row.status == 'run'">处理中</span>
                        <span v-if="scope.row.status == 'close'">已关闭</span>
                        <span v-if="scope.row.status == 'wait'">问题</span>
                    </template> -->
        </el-table-column>
        <el-table-column align="center" prop="creatorName" :label="$t('add.add133')" />
        <el-table-column align="center" prop="createDate" :label="$t('add.add134')" width="160" />
        <el-table-column align="center" prop="deptName" :label="$t('members.chengyuan5')" />
        <el-table-column align="center" :label="$t('add.add131')" width="200">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <div v-if="scope.row.status == 'wait'">
              <el-button type="text" :size="tableButtonSize" @click="toDetail(scope.row)">{{
                $t('add.add132')
              }}</el-button>
              <el-button type="text" :size="tableButtonSize" @click="fanKui(scope.row.id)">{{  $t('add.add088') }}</el-button>
              <el-button v-if="scope.row.status != 'close'" type="text" :size="tableButtonSize"
                @click="guanbi(scope.row.id)">{{ $t('add.add139') }}</el-button>
            </div>
            <div v-if="scope.row.status == 'run'">
              <el-button type="text" :size="tableButtonSize" @click="toDetail(scope.row)">{{
                $t('add.add132')
              }}</el-button>
              <el-button v-if="scope.row.status != 'close'" type="text" :size="tableButtonSize"
                @click="guanbi(scope.row.id)">{{ $t('add.add139') }}</el-button>
            </div>
            <div v-if="scope.row.status == 'close'">
              <el-button type="text" :size="tableButtonSize" @click="toDetail(scope.row)">{{
                $t('add.add132')
              }}</el-button>
            </div>
            <!-- <el-button @click="deleteItem(scope.row.id)" type="text" :size="tableButtonSize">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination background :current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <!-- <el-dialog :title="$t('add.add54')" :visible.sync="dialogVisible" width="50%">
      <el-form label-width="180px">
        <el-form-item label="诊所名称" style="margin-bottom: 10px">
          <el-input :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou43')">
          <el-button :size="optionButtonSize" type="primary"
            ><i class="el-icon-upload el-icon--right"></i>上传文件</el-button
          >
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou47')">
          <el-input :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou49')">
          <el-button :size="optionButtonSize" type="primary"
            ><i class="el-icon-upload el-icon--right"></i>上传文件</el-button
          >
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou52')">
          <el-input :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou53')">
          <el-button :size="optionButtonSize" type="primary"
            ><i class="el-icon-upload el-icon--right"></i>上传文件</el-button
          >
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou48')">
          <el-select v-model="value" style="width: 260px" clearable placeholder="请选择省市区">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input placeholder="请输入详细地址" style="width: 260px; margin-top: 6px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou12')">
          <el-input :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('institutionSetting.jigou14')">
          <el-input :placeholder="$t('add.add148')" style="width: 260px" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :size="optionButtonSize" @click="dialogVisible = false">{{
          $t('add.add203')
        }}</el-button>
        <el-button :size="optionButtonSize" type="primary" @click="dialogVisible = false">{{
          $t('institutionSetting.jigou18')
        }}</el-button>
      </span>
    </el-dialog> -->
    <detail ref="detail" />
  </div>
</template>
<script>
import detail from './detail.vue';
export default {
  name: 'Home',
  components: {
    detail,
  },

  data() {
    return {
      dates: [],
      form: {
        workNo: '',
        workOrderType: '',
        statusName: '',
        startTime: '',
        endTime: '',
      },
      page: 1, // 默认第1页
      limit: 20, // 每页条数
      total: 0, // 总条数
      tableData: [],
      dialogVisible: false,
      radio: 1,
      options: [
        {
          value: 'run',
          label: this.$t('add.add119'),
        },
        {
          value: 'close',
          label: this.$t('add.add120'),
        },
        {
          value: 'wait',
          label: this.$t('add.add121'),
        },
      ],
      value: '',
      typeList: [],
    };
  },
  created() {
    this.getList();
    this.getTypeList();
  },

  methods: {
    // 拿所有数据
    getList() {
      this.$http
        .get(
          `/workmanager/page?page=${this.page}&systemType=0&limit=${this.limit}&workNo=${this.form.workNo}&workOrderType=${this.form.workOrderType}&statusName=${this.form.statusName}&startTime=${this.form.startTime}&endTime=${this.form.endTime}
          `,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if (this.tableData.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 工单类型
    getTypeList() {
      this.$http
        .get('/sys/params/page?page=1&limit=9999&paramCode=work_order_type&paramType=1')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.typeList = res.data.list;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 新增或修改
    saveOrUpdate() {
      this.$http
        .get('/workmanager/saveOrUpdate?', this.form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
      this.getList();
    },
    add() {
      this.dialogVisible = true;
    },
    guanbi(id) {
      this.$confirm(this.$t('add.add1411'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .post('/workmanager/saveOrUpdate', { id: id, status: 'close' })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add144'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch((err) => {
          console.log('err==>', err);
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    fanKui(id) {
      this.$prompt('请输入反馈内容', '反馈', {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add203'),
        inputErrorMessage: this.$t('add.add72'),
      })
        .then(({ value }) => {
          this.$http
            .post('/workmanager/saveOrUpdate', { id: id, feedback: value })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.getList();
                this.$message({
                  type: 'success',
                  message: '反馈成功',
                });
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消反馈',
          });
        });
    },
    toDetail(val) {
      this.$refs.detail.form = val;
      this.$refs.detail.dialogTableVisible = true;
    },
    deleteItem(id) {
      this.$confirm(this.$t('add.add055'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .delete(`/workmanager?id=${id} `)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    // 重置
    resetClick() {
      this.dates = [];
      this.form = {
        workNo: '',
        workOrderType: '',
        statusName: '',
        startTime: '',
        endTime: '',
      };
      this.page = 1;
      this.total = 0;
      this.getList();
    },
    // 搜索
    getPatientList() {
      if (this.dates && this.dates.length > 0) {
        this.form.startTime = this.dates[0];
        this.form.endTime = this.dates[1];
      }else {
        this.form.startTime = '';
        this.form.endTime = '';
      }
      this.getList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.person_homeView {
  height: 100%;

  .el-header {
    color: #333;
  }

  .el-aside {
    background-color: transparent;
    // color: #333;
    text-align: center;

    // padding-left: 12px;
    // line-height: 200px;
    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #f8f8f8;
    // color: #333;
    text-align: left;
    padding: 10px !important;
  }

  .el-container {
    height: 100%;
  }

  .nav_back {
    margin-top: 15px;
    padding-left: 5px;

    .title {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #4884e5;
    }
  }
}

.el-menu-item.is-active {
  background-color: #e6ecf0 !important;
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #003e67;
}

.partner_inner {
  margin-top: 20px;
}
</style>
